<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <title>卡片式页面模板</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="card">
        <!-- 左上大字 -->
        <h1 class="big-title">闭嘴！</h1>

        <!-- 左侧人物图 -->
        <div class="left">
            <img class="big-image" src="img/left-character.jpg" alt="角色大图" />
        </div>

        <!-- 右侧内容 -->
        <div class="right">
            <!-- 我在（上） + Logo + 玩（下） -->
            <div class="logo-line">
                <span class="text">我在</span>
                <img class="logo" src="img/logo.png" alt="Logo" />
                <span class="text">玩</span>
            </div>

            <!-- 技能卡片 -->
            <div class="ability">
                <img class="icon" src="img/ability-icon.jpg" alt="技能图标" />
            </div>

            <!-- 描述文字 -->
            <div class="desc">
                如果你惹怒了我，我将用黑金古刀，损失
                <span class="num">300</span>点生命值并对你造成
                <span class="num">160</span>点伤害
            </div>
        </div>
    </div>

    <!-- 新增内容区域 -->
    <div class="additional-content">
        <!-- 音频部分 -->
        <div class="media-section">
            <h2 id="music">无间渡</h2>
            <audio src="mp3/无间渡.mp3" controls></audio>
        </div>

        <!-- 视频部分 -->
        <div class="media-section">
            <h2 id="video">高燃混剪</h2>
            <video src="mp4/高燃混剪.mp4" controls></video>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p id="contact">
            下载端游：<a href="https://www.yjwujian.cn/">Naraka</a>
            <br />
            世界观：<a href="https://www.yjwujian.cn/world/#/outlook">Outlook</a>
            <br />
            地图展示：<a href="https://www.yjwujian.cn/world/#/scene">Scene</a>
        </p>
    </footer>
</body>

</html>